import React from 'react';
import CommonList from '../../../../../components/CommonLists/list';
import { GLOBAL_TRUE_FALSE } from '../../../../../utils/constant';
import services from '../../../../../services/api';
import Modal from '../../../../../components/Modal';
import { Tooltip, Button, message } from 'antd';
import Compare from './compare';
class ApplicationList extends CommonList {
  constructor(props) {
    super(props);
    this.api = 'strategyComponent';
    this.tableClass = '';
    this.delButton = false;
    this.tableParams = {
      rowKey: 'version'
    };
    this.columns = [
      {
        dataIndex: 'is_current',
        key: 'is_current',
        render: text => {
          return <>{text === GLOBAL_TRUE_FALSE._TRUE ? <span>当前</span> : <span></span>}</>;
        }
      },
      {
        title: '版本号',
        dataIndex: 'version',
        key: 'version',
        ellipsis: true,
        render: text => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {'v'+text}
              </div>
            </Tooltip>
          );
        }
      },
      {
        title: '修改人',
        key: 'update_user_name',
        dataIndex: 'update_user_name',
        ellipsis: true,
        render: text => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {text}
              </div>
            </Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        width: 150,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        }
      }
    ];
    this.compareButton = record => {
      return (
        <Button size='small' type='link' onClick={this.compare.bind(this, record)}>
          对比
        </Button>
      );
    };
    this.revertButton = record => {
      return (
        <Button
          size='small'
          type='link'
          disabled={record.audit_status === this.AUDIT._WAIT}
          onClick={this.revert.bind(this, record)}
        >
          还原
        </Button>
      );
    };

    this.btnGroup = [this.compareButton, this.revertButton];
  }
  componentDidMount() { }

  compare = record => {
    Modal.open({
      title: '版本对比',
      okTxt: '还原',
      isOkBtn: true,
      isCancelBtn: true,
      width: 1000,
      maskClosable: true,
      ok: () => {
        this.revert(record);
      },
      cancel: () => {
        Modal.close();
      },
      content: <Compare strategy_id={record.strategy_id} version={record.version} />
    });
  };

  // 还原
  revert = record => {
    Modal.open({
      title: '',
      isConfirm: true,
      okTxt: '确定',
      isOkBtn: true,
      cancelTxt: '取消',
      isCancelBtn: true,
      width: 500,
      maskClosable: true,
      ok: () => {
        services.strategyComponent
          .revert({
            strategy_id: record.strategy_id,
            version: record.version
          })
          .then(res => {
            if (res.code === 0) {
              message.success(res.msg);
              Modal.close();
            } else {
              message.error(res.msg);
            }
          });
      },
      cancel: () => {
        Modal.close();
      },
      content: '确认要还原到该版本吗？'
    });
  };

  // 删除时的参数
  getDeleteParam = record => {
    return { app_id: record.app_id };
  };
}

export default ApplicationList;
